import React from 'react'
import {TouchableOpacity, Text} from 'react-native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {Leave} from '../screens/Leave/Leave'
import {LeaveAdd} from '../screens/Leave/LeaveAdd'
import LeaveDetail from '../screens/Leave/LeaveDetail'
import {LeaveReasonDetail} from '../screens/Leave/LeaveReasonDetail'
import {CreateLeaveScreen} from "../screens/Leave/CreateLeaveScreen.tsx";

const Stack = createNativeStackNavigator()

// 头部按钮样式
const headerButtonStyle = {
    backgroundColor: '#3182ce',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
    marginRight: 8,
}

const headerButtonTextStyle = {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500' as const,
}

export const LeaveStackNavigator = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="LeaveList"
                component={Leave}
                options={({navigation}) => ({
                    title: '请假',
                    headerRight: () => (
                        <TouchableOpacity
                            style={headerButtonStyle}
                            onPress={() => navigation.navigate('LeaveAdd')}
                        >
                            <Text style={headerButtonTextStyle}>+ 新增</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="LeaveAdd"
                component={LeaveAdd}
                options={({route}: any) => ({
                    title: (route?.params as any)?.isEdit ? '编辑请假申请' : '请假申请'
                })}
            />
            <Stack.Screen
                name="LeaveReasonDetail"
                component={LeaveReasonDetail}
                options={{title: '请假事由详细信息'}}
            />
            <Stack.Screen
                name="LeaveDetail"
                component={LeaveDetail}
                options={{title: '请假详情'}}
            />
            <Stack.Screen
                name="CreateLeaveScreen"
                component={CreateLeaveScreen}
                options={{title: "新申请单"}}
            />
        </Stack.Navigator>
    )
}